<template>
	<cxView :class="{'uni-dark':dark, 'uni-nvue-fixed': fixed}">
		<cxView position="relative"
			:class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }"
			:background="themeBgColor">
			<!-- statusBar -->
			<cxView :height="statusBarHeight" class="status_bar"></cxView>
			<!-- navBar 开始 -->
			<cxView :color="themeColor" :width="navWidth" display="flex" class="uni-navbar__header">

				<!-- leftBtn  开始-->
				<cxView display="flex" @confirm="onClickLeft" :width="leftIconWidth"
					class="uni-navbar__header-btns uni-navbar__header-btns-left" alignItems="center">
					<slot name="left">
						<cxView v-if="leftIcon.length > 0">

							<cxImg :color="themeColor" :src="leftIcon" :size="leftIconSize" :bgWidth="leftIconSize"
								:bgHeight="leftIconSize"></cxImg>
						</cxView>
						<cxView :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }"
							class="uni-navbar-btn-text" v-if="(leftText.length > 0)">
							<cxText :color="themeColor" :size="leftSize">{{ leftText }}</cxText>
						</cxView>
					</slot>
				</cxView>
				<!-- leftBtn 结束 -->


				<!-- center Btn 开始 -->
				<cxView display="flex" justifyContent="center" alignItems="center" class="uni-navbar__header-container "
					@confirm="onClickTitle" flex="1">
					<slot>
						<cxView display="flex" justifyContent="center" flex="1"
							class="uni-navbar__header-container-inner" v-if="title.length>0">
							<cxText class="uni-ellipsis-1" :color="themeColor" :size="size"
								customStyle="{text-align:center}">{{ title }}</cxText>
						</cxView>
					</slot>
				</cxView>
				<!-- center Btn 结束 -->

				<!-- right 开始 -->
				<cxView @confirm="onClickRight" display="flex" justifyContent="flex-end"
					class="uni-navbar__header-btns uni-navbar__header-btns-right" :width="rightIconWidth">
					<slot name="right">
						<cxView v-if="rightIcon.length>0">
							<!-- <u-icon :color="themeColor" :name="rightIcon" :size="rightIconSize"></u-icon> -->
							<cxImg :color="themeColor" :src="rightIcon" :size="rightIconSize" :bgWidth="rightIconSize"
								:bgHeight="rightIconSize"></cxImg>
						</cxView>

						<cxView class="uni-navbar-btn-text" v-if="(rightText.length > 0) && !(rightIcon.length>0)">
							<cxText :size="rightSize" :color="themeColor">{{ rightText }}</cxText>
						</cxView>
					</slot>
				</cxView>
				<!-- right结束 -->

			</cxView>
			<!-- navBar 结束 -->


		</cxView>

		<!-- #ifndef H5 ||APP -->
		<cxView v-if="fixed">
			<cxView class="status_bar" :height="navbarHeight" />
		</cxView>
		<!-- #endif -->
	</cxView>
</template>

<script>
	const getVal = (val) => typeof val === 'number' ? val + 'px' : val;

	/**
	 *
	 *
	 * NavBar 自定义导航栏
	 * @description 导航栏组件，主要用于头部导航
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=52
	 * @property {Boolean} dark 开启黑暗模式
	 * @property {String} title 标题文字
	 * @property {String} leftText 左侧按钮文本
	 * @property {String} rightText 右侧按钮文本
	 * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
	 * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
	 * @property {String} color 图标和文字颜色
	 * @property {String} backgroundColor 导航栏背景颜色
	 * @property {Boolean} fixed = [true|false] 是否固定顶部
	 * @property {Boolean} statusBar = [true|false] 是否包含状态栏
	 * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
	 * @property {Boolean} stat 是否开启统计标题上报
	 * @event {Function} clickLeft 左侧按钮点击时触发
	 * @event {Function} clickRight 右侧按钮点击时触发
	 * @event {Function} clickTitle 中间标题点击时触发
	 */
	export default {
		name: "cxNav",
		data() {
			return {
				navHeight: "",
				statusHeight: ""
			}
		},
		components: {


		},
		emits: ['clickLeft', 'clickRight', 'clickTitle'],
		props: {
			dark: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ""
			},
			leftText: {
				type: String,
				default: ""
			},
			rightText: {
				type: String,
				default: ""
			},
			leftIcon: {
				type: String,
				default: ""
			},
			rightIcon: {
				type: String,
				default: ""
			},
			fixed: {
				type: [Boolean, String],
				default: false
			},
			color: {
				type: String,
				default: ""
			},
			backgroundColor: {
				type: String,
				default: ""
			},

			shadow: {
				type: [Boolean, String],
				default: false
			},
			border: {
				type: [Boolean, String],
				default: true
			},
			height: {
				type: [Number, String],
				default: 44
			},
			leftWidth: {
				type: [Number, String],
				default: 120
			},
			rightWidth: {
				type: [Number, String],
				default: 120
			},
			stat: {
				type: [Boolean, String],
				default: ''
			},

			/**
			 * left
			 */
			leftSize: {
				type: String,
				default: '26'
			},
			leftIconSize: {
				type: String,
				default: '26'
			},

			/**
			 * center
			 */
			size: {
				type: String,
				default: '28'
			},

			/**
			 * right
			 */
			rightSize: {
				type: String,
				default: '26'
			},
			rightIconSize: {
				type: String,
				default: '34'
			},
			rightColor: {
				type: String,
				default: ''
			},

			// /**
			//  * statusHeight
			//  */
			// statusHeight:{
			// 	type:  String,
			// 	default: ''
			// },
			// /**
			//  * navHeight
			//  */
			// navHeight:{
			// 	type:  String,
			// 	default: ''
			// },
			/**
			 * 
			 */
			bgColor: {
				type: String,
				default: ''
			}
		},
		computed: {
			themeBgColor() {
				if (this.dark) {
					// 默认值
					if (this.bgColor) {
						return this.bgColor
					} else {
						return this.dark ? '#333' : '#FFF'
					}
				}
				return this.bgColor || '#FFF'
			},
			themeColor() {
				if (this.dark) {
					// 默认值
					if (this.color) {
						return this.color
					} else {
						return this.dark ? '#fff' : '#333'
					}
				}
				return this.color || '#333'
			},
			navbarHeight() {
				return uni.$cx.cxNavBarHeight()
			},
			leftIconWidth() {
				return getVal(this.leftWidth)
			},
			rightIconWidth() {
				return getVal(this.rightWidth)
			},
			statusBarHeight() {
				return uni.$cx.cxStatusBarHeight() * 2
			},
			navWidth() {
				if (uni.getSystemInfoSync().uniPlatform == ("mp-weixin" || "")) {
					let width = uni.getMenuButtonBoundingClientRect().width * 2;
					return (750 - width - 30)
				} else if (uni.getSystemInfoSync().uniPlatform == ("web")) {

					return "98%"
				} else {
					return "100%"
				}

			},

		},
		mounted() {
			if (uni.report && this.stat && this.title !== '') {
				uni.report('title', this.title)
			}

			this.statusHeight = uni.$cx.cxStatusBarHeight();
			this.navHeight = uni.$cx.cxNavBarHeight();

			this.bgColor = this.backgroundColor;
			// this.backgroundColor = "red";


		},
		methods: {
			onClickLeft() {
				this.$emit("clickLeft");
			},
			onClickRight() {
				this.$emit("clickRight");
			},
			onClickTitle() {
				this.$emit("clickTitle");
			}
		}
	};
</script>

<style lang="scss" scoped>
	$nav-height: 44px;


	.uni-navbar-btn-text {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		// line-height: 12px;
	}

	.uni-navbar__header {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding: 0 5px;
		flex-direction: row;
		height: $nav-height;
		// font-size: 12px;
	}

	.uni-navbar__header-btns {
		/* #ifndef APP-NVUE */
		overflow: hidden;
		display: flex;
		/* #endif */
		flex-wrap: nowrap;
		flex-direction: row;
		width: 120rpx;
		// padding: 0 6px;
		justify-content: center;
		align-items: center;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.uni-navbar__header-btns-left {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		width: 120rpx;
		justify-content: flex-start;
		align-items: center;
	}

	.uni-navbar__header-btns-right {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 150rpx;
		// padding-right: 30rpx;
		justify-content: flex-end;
		align-items: center;
	}

	.uni-navbar__header-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */

		flex: 1;
		padding: 0 10px;
		overflow: hidden;
	}

	.uni-navbar__header-container-inner {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */

		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		overflow: hidden;
		// box-sizing: border-box;
	}


	.uni-navbar__placeholder-view {
		height: $nav-height;
	}

	.uni-navbar--fixed {
		position: fixed;
		z-index: 998;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		/* #endif */

	}

	.uni-navbar--shadow {
		box-shadow: 0 1px 6px #ccc;
	}

	.uni-navbar--border {
		border-bottom-width: 1rpx;
		border-bottom-style: solid;
		border-bottom-color: #eee;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		/* #ifndef APP-NVUE */
		white-space: nowrap;
		text-overflow: ellipsis;
		/* #endif */
		/* #ifdef APP-NVUE */
		lines: 1;
		text-overflow: ellipsis;
		/* #endif */
	}

	// 暗主题配置
	.uni-dark {}
</style>